<template lang="">
  <div id="printArea">
    <table>
      <tr>
        <td>姓名</td>
        <td>{{ user.user_info?user.user_info.company_name:"" }}</td>
      </tr>
      <!-- <tr>
        <td>电话</td>
        <td>{{ user.user_info.phone }}</td>
      </tr> -->
      <tr>
        <td>角色</td>
        <td>{{ user.role_name }}</td>
      </tr>
      <tr>
        <td>主账号</td>
        <td>{{ user.parent_username }}</td>
      </tr>
      <tr>
        <td>账号</td>
        <td>{{ user.username }}</td>
      </tr>
      <tr>
        <td>IP</td>
        <td>{{ user.user_info.last_login_ip }}</td>
      </tr>
      <tr>
        <td>最近登录时间</td>
        <td>{{ user.user_info.expire_time }}</td>
      </tr>
    </table>
    <el-button @click='push_password' class="bth_pass">修改密码</el-button>
    <el-dialog title="修改密码" :visible.sync="isuser" width="30%" :close-on-click-modal="false" @close="close_dialog">

        <el-row>
            <el-col :span="4">
                旧密码
            </el-col>
            <el-col :span="20">
                <el-input v-model="old_password"></el-input>
            </el-col>
        </el-row>
        <el-row  style='margin-bottom:15px'>
            <el-col :span="4">
                新密码
            </el-col>
            <el-col :span="20">
                <el-input v-model="new_password"></el-input>
            </el-col>
        </el-row>
        <el-row  style='margin-bottom:15px'>
            <el-col :span="4">
                确认新密码
            </el-col>
            <el-col :span="20">
                <el-input v-model="confirm_password"></el-input>
            </el-col>
        </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isuser = false">取 消</el-button>
        <el-button @click="yes_setpassword">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUserInfo, changePassword } from "@/api/user";
export default {
  data() {
    return {
      isuser: false,
      user: {},
      old_password: '',
      new_password: '',
      confirm_password: ''
    };
  },
  mounted() {
    this.get_UserInfo();
  },
  methods: {
    get_UserInfo() {
      getUserInfo().then((res) => {
        if (res.code === 200) {
          this.user = res.data;
        } else {
          this.$message.error('获取用户信息失败');
        }
      }).catch((error) => {
        console.error('获取用户信息发生错误:', error);
      });
    },
    push_password() {
      this.isuser = true;
    },
    close_dialog() {
      this.old_password = '';
      this.new_password = '';
      this.confirm_password = '';
    },
    yes_setpassword() {
      if (!this.validatePassword()) {
        return;
      }
      changePassword({
        new_password: this.new_password,
        old_password: this.old_password
      }).then(res => {
        if (res.code === 200) {
          this.$message.success("修改成功");
          this.isuser = false;
        } else {
          this.$message.error('修改密码失败');
        }
      }).catch(error => {
        console.error('修改密码发生错误:', error);
        this.$message.error('修改密码失败');
      });
    },
    validatePassword() {
      if (this.old_password === '') {
        this.$message.error('请输入旧密码~');
        return false;
      }
      if (this.new_password === '') {
        this.$message.error('请输入新密码~');
        return false;
      }
      if (this.new_password !== this.confirm_password) {
        this.$message.error('两次输入的密码不一致，请重新输入~');
        return false;
      }
      // 可以在此处添加更多密码验证逻辑，如长度、字符类型等
      return true;
    }
  }
};
</script>
<style scoped>
#printArea {
  width: 100%;
  margin: 0 auto;
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 50%;
  /* margin: 0 auto; */
  border-collapse: collapse;
}
#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td {
  border: 1px solid #c5c5c5;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0;
  margin: 0;
  text-align: left;
  padding: 0 15px;
  box-sizing: border-box;
}

#printArea table tr td:nth-child(1) {
  width: 130px;
  text-align: center;
}



.el-row{
    display:flex;
    align-items:center;
    margin-bottom: 15px;
}


.bth_pass{
    background: #108cbd;
    color: #fff;
    margin-top: 15px;
}
</style>
